<script setup lang="ts">
import { getTopBookingDataAPI } from "@/api/dashboard/index";
import { IEchartIlineData, ITopCard } from "@/api/dashboard/types";
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

const topCard = ref<ITopCard>({
  total: 0,
  todayNum: 0,
  todayPassCheck: 0,
  todayAwaitCheck: 0,
});

onMounted(async () => {
  const res = await getTopBookingDataAPI();
  topCard.value = res.data;
});
</script>

<template>
  <div class="dashboard-container">
    <div class="t">预约管理控制台</div>
    <!-- 数据卡片 -->

    <el-row :gutter="15">
      <el-col :span="6">
        <div class="card-item">
          <div class="title">共计预约</div>
          <div class="num">{{ topCard.total }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-item">
          <div class="title">今日预约</div>
          <div class="num">{{ topCard.todayNum }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-item">
          <div class="title">今日通过审核</div>
          <div class="num">{{ topCard.todayPassCheck }}</div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="card-item">
          <div class="title">今日待审核预约</div>
          <div class="num">{{ topCard.todayAwaitCheck }}</div>
        </div>
      </el-col>
    </el-row>

    <!-- Echarts 图表 -->

    <el-row :gutter="20" class="mt-3">
      <el-col :span="12" class="mb-2">
        <BarChart
          id="bar"
          height="300px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
      <el-col :span="12" class="mb-2">
        <PieChart
          id="pie"
          height="300px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row>

    <el-row class="mt-3">
      <el-col class="mb-2">
        <LineEchars
          id="line"
          height="300px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 15px 24px;
  .t {
    color: #40c9c6;
    width: 100%;
    font-size: 26px;
    text-align: center;
    padding: 10px;
  }
  .card-item {
    border-radius: 8px;

    padding: 30px 15px;
    background-color: #fff;
    .title {
      font-size: 16px;
    }
    .num {
      margin-top: 20px;
      font-size: 35px;
      text-align: center;
      color: #40c9c6;
    }
  }
}
</style>
